<!-- 市区选择API功能测试页面 -->
<template>
  <view class="min-h-screen bg-gray-50 p-6">
    <!-- 页面标题 -->
    <view class="mb-8">
      <text class="text-[36rpx] font-bold text-gray-900 text-center">市区选择API功能测试</text>
    </view>

    <!-- API信息 -->
    <view class="bg-white rounded-2xl p-6 shadow-sm mb-6">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">API接口信息</view>
      <view class="space-y-3 text-[24rpx] text-gray-700">
        <view class="flex justify-between">
          <text>省份数据源：</text>
          <text class="font-medium text-blue-600">腾讯地图API</text>
        </view>
        <view class="flex justify-between">
          <text>城市数据源：</text>
          <text class="font-medium text-green-600">阿里云DataV</text>
        </view>
        <view class="flex flex-col">
          <text class="mb-2">城市API格式：</text>
          <text class="text-[22rpx] text-gray-500 bg-gray-100 p-3 rounded">
            https://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/{provinceCode}_city.json
          </text>
        </view>
      </view>
    </view>

    <!-- 测试区域 -->
    <view class="bg-white rounded-2xl p-6 shadow-sm mb-6">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">API功能测试</view>
      <view class="text-[24rpx] text-gray-500 mb-6">
        测试新的API接口，验证省份和城市数据的动态获取功能
      </view>
      
      <CityPicker
        mode="city"
        placeholder="请选择省市（测试API）"
        title="选择省市（API测试）"
        @confirm="handleRegionConfirm"
        @cancel="handleRegionCancel"
      />
      
      <!-- 显示选择结果 -->
      <view v-if="selectedRegion" class="mt-4 p-4 bg-blue-50 rounded-xl border border-blue-200">
        <view class="flex items-center mb-2">
          <IconFont name="check-circle" class="text-blue-600 mr-2" size="24rpx" />
          <text class="text-[24rpx] text-blue-600 font-medium">选择结果：</text>
        </view>
        <view class="text-[26rpx] text-blue-800">
          <text v-if="selectedRegion.province" class="block">
            省份：{{ selectedRegion.province.name }} ({{ selectedRegion.province.code }})
          </text>
          <text v-if="selectedRegion.city" class="block">
            城市：{{ selectedRegion.city.name }} ({{ selectedRegion.city.code }})
          </text>
        </view>
      </view>
    </view>

    <!-- API测试说明 -->
    <view class="bg-white rounded-2xl p-6 shadow-sm mb-6">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">API测试说明</view>
      <view class="space-y-3 text-[24rpx] text-gray-700">
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            1
          </view>
          <text class="flex-1">省份数据通过腾讯地图API获取，包含全国所有省份</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            2
          </view>
          <text class="flex-1">城市数据通过阿里云DataV接口动态获取，根据选择的省份代码请求对应城市</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            3
          </view>
          <text class="flex-1">API请求失败时会自动降级到静态数据，确保组件可用性</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            4
          </view>
          <text class="flex-1">河南省已添加到静态数据中，可以作为API测试的参考</text>
        </view>
      </view>
    </view>

    <!-- 数据格式说明 -->
    <view class="bg-white rounded-2xl p-6 shadow-sm">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">数据格式说明</view>
      
      <view class="mb-4">
        <text class="text-[26rpx] font-medium text-gray-800 block mb-2">省份数据格式（腾讯地图API）：</text>
        <view class="bg-gray-100 p-3 rounded text-[22rpx] text-gray-600">
          {<br/>
          &nbsp;&nbsp;"status": 0,<br/>
          &nbsp;&nbsp;"result": [<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;{<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"id": "110000",<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"fullname": "北京市",<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"level": 1<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;}<br/>
          &nbsp;&nbsp;]<br/>
          }
        </view>
      </view>

      <view>
        <text class="text-[26rpx] font-medium text-gray-800 block mb-2">城市数据格式（阿里云DataV）：</text>
        <view class="bg-gray-100 p-3 rounded text-[22rpx] text-gray-600">
          {<br/>
          &nbsp;&nbsp;"rows": [<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;{<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"adcode": "411500",<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"name": "信阳市",<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"level": "city",<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"parent": "河南省"<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;}<br/>
          &nbsp;&nbsp;],<br/>
          &nbsp;&nbsp;"total": 18<br/>
          }
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'
import CityPicker from './CityPicker.vue'

/**
 * 选择结果类型定义
 */
interface SelectionResult {
  province?: {
    code: string
    name: string
    level: number
    parentCode?: string
  }
  city?: {
    code: string
    name: string
    level: number
    parentCode?: string
  }
}

// 响应式数据
const selectedRegion = ref<SelectionResult | null>(null)

/**
 * 处理市区选择确认
 * @param result 选择结果
 */
const handleRegionConfirm = (result: SelectionResult) => {
  selectedRegion.value = result
  
  console.log('API测试 - 选择的区域:', result)
  
  // 显示选择结果提示
  let message = ''
  if (result.city) {
    message = `已选择：${result.province?.name} ${result.city.name}`
  } else if (result.province) {
    message = `已选择：${result.province.name}`
  }
  
  if (message) {
    Taro.showToast({
      title: message,
      icon: 'success',
      duration: 2000
    })
  }
}

/**
 * 处理市区选择取消
 */
const handleRegionCancel = () => {
  console.log('API测试 - 取消区域选择')
  Taro.showToast({
    title: '已取消选择',
    icon: 'none',
    duration: 1500
  })
}
</script>
